<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>VueJs指令：v-on：keydown</title>
</head>
<body>
<div id="app">
    <textarea name="" cols="30" rows="10" maxlength="140" id="content" @keyup="inputcontent" @keydown="inputcontent">
    </textarea>
  <span>你可以输入{{size}}字</span>
</div>
<script src="js/vue.min.js"></script>
<script>

  // 案例：输入内容，本来只能输入140个字符，告诉用户已经输入了多少个文字了
  var vue = new Vue({
    el:"#app",
    data:{
      content:"",
      size:140,
    },
    methods:{
      inputcontent:function(){
        // 1: 获取每次用户输入的值
        var cnt = document.getElementById("content").value;
        // 2: 用140减去用户输入内容的长度就得到还可以输入的字数。
        this.size = 140 -  cnt.length;
      }
    }
  })
</script>
</body>
</html>